<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <action-bar />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :disable-pageable="true"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button title="编辑" type="text" size="mini" icon="el-icon-edit" @click="onEdit(row._id)" />
            <router-link :to="'/cmdb/businesses/businesses/' + row._id" class="el-button el-button--text el-button--mini"><i class="el-icon-view" /></router-link>
            <el-button title="删除" type="text" size="mini" icon="el-icon-delete" @click="remove(row._id)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>

    <FormDialog
      title="编辑"
      :show="dialogFormVisible"
      width="40%"
      @on-ok="onSave"
      @on-cancel="onCancel"
    >
      <edit-form v-if="dialogFormVisible" :id="editId" ref="editForm" />
    </FormDialog>
  </div>
</template>

<script>
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'

import { list, remove } from '@neu/cmdb-ui/api/business'
import databind from '@neu/biz-core/mixins/databind'
import FormDialog from '@neu/biz-core/components/FormDialog'
import EditForm from './components/form'
const noimg = require('@neu/cmdb-ui/assets/images/noimg.png')

export default {
  name: 'BusinessTablePage',
  components: {
    ActionBar,
    PageableTable,
    FormDialog,
    EditForm
  },
  mixins: [databind],
  data() {
    return {
      r: list,
      d: remove,
      insideColumns: [
        {
          title: '图标',
          key: 'url',
          render: (h, params) => {
            return (
              <el-image style='width: 50px; height: 50px;' src={params.row.icon} fit='contain'>
                <div slot='error' class='image-slot'>
                  <el-image src={noimg} fit='contain' />
                </div>
              </el-image>
            )
          }
        },
        { title: '业务名称', key: 'name' },
        { title: '业务标识', key: 'code' },
        { title: '描述', key: 'desc' }
      ],
      dialogFormVisible: false,
      editId: -1
    }
  },
  created() {
    this.filter()
  },
  methods: {
    onEdit(id) {
      this.editId = id
      this.dialogFormVisible = true
    },
    onSave() {
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    onCancel() {
      this.$refs.editForm.reset()
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>
.router-link {
  margin: 0 10px;
}
</style>
